import React from "react";
import { SaveOutlined, CheckCircleOutlined } from "@ant-design/icons";

type AutoSaveStatus = "idle" | "saving" | "saved";

interface AutoSaveIndicatorProps {
  status: AutoSaveStatus;
}

const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({ status }) => {
  if (status === "idle") return null;

  const statusConfig = {
    saving: {
      icon: <SaveOutlined spin style={{ color: "#1890ff" }} />,
      text: "保存中...",
      color: "#1890ff",
    },
    saved: {
      icon: <CheckCircleOutlined style={{ color: "#52c41a" }} />,
      text: "已保存",
      color: "#52c41a",
    },
  };

  const config = statusConfig[status];

  return (
    <div
      style={{
        position: "fixed",
        top: "100px",
        right: "24px",
        zIndex: 1000,
        background: "#fff",
        padding: "8px 12px",
        borderRadius: "6px",
        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
        border: `1px solid ${config.color}`,
        display: "flex",
        alignItems: "center",
        gap: "6px",
        fontSize: "12px",
        color: config.color,
        fontWeight: 500,
        transition: "all 0.3s ease",
      }}
    >
      {config.icon}
      {config.text}
    </div>
  );
};

export default AutoSaveIndicator;
